<template>
  <div class="autumn-container">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="autumn-center">
      <!-- 搜索栏 -->
      <div class="query-form">
        <autumn-search :modelValue="queryInfo" @search="search">
          <template #default>
            <el-col :span="4">
              <el-form-item label="名称" prop="name">
                <el-input v-model="queryInfo.name" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="类型" prop="target">
                <el-select v-model="queryInfo.target">
                  <el-option v-for="(value, key, index) in menuTargets" :key="index" :label="value" :value="key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="启用" prop="isEnable">
                <el-select v-model="queryInfo.isEnable">
                  <el-option label="是" value="1" />
                  <el-option label="否" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </autumn-search>
      </div>

      <!-- 数据表格 -->
      <div class="main-body top">
        <autumn-table :isPage="false" :page="page" :expandKeys="expandKeys">
          <template #button>
            <el-button type="primary" icon="el-icon-plus" v-if="$hasPermission('system:menu:add')" @click="toView">新增
            </el-button>
          </template>
          <template #column>
            <el-table-column type="index" label="#" fixed="left" align="center">
              <template #default="scope">
                {{ initIndex(scope.$index) }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="href" label="URL" />
            <el-table-column prop="sort" label="排序" align="center" width="80" />
            <el-table-column prop="target" label="类型" align="center" width="80">
              <template #default="scope">
                <el-tag size="small"
                  :type="scope.row.target == 'BUTTON' ? 'info' : scope.row.target == 'MENU' ? 'warning' : 'success'">
                  {{ menuTargets[scope.row.target] }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="图标" align="center" width="80">
              <template #default="scope">
                <i :class="scope.row.icon"></i>
              </template>
            </el-table-column>
            <el-table-column prop="permission" label="权限" />
            <el-table-column label="启用" align="center" width="100">
              <template #default="scope">
                <el-switch v-model="scope.row.isEnable" :active-value="1" :inactive-value="0"
                  :disabled="!$hasPermission('system:menu:enable&system:menu:disable')"
                  @change="changeEnabled(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="100" />
            <el-table-column prop="createName" label="创建人" width="100" />
            <el-table-column prop="createTime" label="创建时间" align="center" width="150"
              :formatter="(row: any) => $moment(row.createTime, 'YYYY-MM-DD HH:mm')" />
            <el-table-column label="操作" fixed="right" align="center" width="160">
              <template #default="scope">
                <el-button-group>
                  <el-button type="info" icon="el-icon-view" size="small" title="查看" @click="toView(scope.row, '1')" />
                  <el-button type="primary" icon="el-icon-edit" size="small" title="编辑"
                    v-if="$hasPermission('system:menu:update')" @click="toView(scope.row)" />
                  <el-button type="danger" icon="el-icon-delete" size="small" title="删除"
                    v-if="$hasPermission('system:menu:delete')" @click="del(scope.row)" />
                </el-button-group>
              </template>
            </el-table-column>
          </template>
        </autumn-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import hooks from 'src/hook/index'
import { $listDict, $confirmMsg, $hasPermission, $moment } from 'src/util/tools'
import { pageMenu, enableMenu, disableMenu, deleteMenu } from 'src/api/system/menu'

const menuTargets = $listDict('MENU_TARGET')

// 分页查询
const expandKeys = ref<Array<any>>([])
const queryInfo = reactive({
  name: '',
  target: '',
  isEnable: ''
})
const { page, initIndex, search } = hooks.useTable(() => {
  pageMenu(queryInfo).then(({ data }) => {
    page.data = data
    expandKeys.value.push(data[0].id)
  })
})

// 启/禁用
const changeEnabled = function (row: any) {
  const id = row.id
  const isEnable = row.isEnable
  if (isEnable) {
    enableMenu(id).then(() => {
      search()
    })
  } else {
    disableMenu(id).then(() => {
      search()
    })
  }
}

// 删除
const del = function (row: any) {
  const ids = [row.id]
  $confirmMsg('确认删除吗？', () => {
    deleteMenu(ids).then(() => {
      search()
    })
  })
}

// 查看
const router = useRouter()
const toView = function (row: any, type?: string) {
  const id = row.id

  router.push({
    path: type ? '/system/menu/menuView' : '/system/menu/menuForm',
    query: { id }
  })
}
</script>

<style lang="scss" scoped></style>
